<template>
  <my-modal v-model:visible="props.ckdUvisible" @update:visible="handelClose" title="试卷答案">
    <div class="ckdUrrent">
      <span
        v-for="(item, index) in ckdaInfoList"
        v-html="
          props.currentTopic?.tmlx !== '判断题'
            ? item?.ckda
            : item?.ckda === 'true' || item?.ckda === true
            ? '√'
            : '×'
        "
        :key="index"
        class="mr-2"
        @click="showImg($event)"
        :data-index="ckdaInfoList?.length > 1 ? `${item.tmbh} : ` : ''"
        :data-end="ckdaInfoList?.length > 1 ? `，` : ''"
      ></span>
      <div v-if="currentTopic.dfdInfoList?.length">得分点</div>
      <span
        v-for="(item, index) in currentTopic.dfdInfoList"
        v-html="`${item.sortNum}:${item.contents}(${item.dfdScore})`"
        :key="index"
        class="mr-2"
        @click="showImg($event)"
        :data-index="currentTopic.dfdInfoList?.length > 1 ? `${index + 1} : ` : ''"
        :data-end="currentTopic.dfdInfoList?.length > 1 ? `，` : ''"
      ></span>
    </div>
  </my-modal>
</template>

<script setup lang="ts">
import myModal from '../modal.vue'
import { createImgPreview } from '/@/components/Preview'
import { computed } from 'vue'

const props = defineProps({
  ckdUvisible: {
    type: Boolean,
    default: false,
  },
  currentTopic: {
    type: Object,
    default: () => ({}),
  },
} as any)

const ckdaInfoList = computed(
  () => props.currentTopic?.ckdaInfoList?.sort((a, b) => a.tmxh - b.tmxh) ?? []
)

const emits = defineEmits(['update:ckdUvisible'])

function handelClose() {
  emits('update:ckdUvisible', false)
}

// 参考答案里面的图片预览
const showImg = e => {
  if (e.target.tagName == 'IMG') {
    createImgPreview({
      imageList: [e.target.src],
    })
  }
}
</script>

<style lang="less" scoped>
.ckdUrrent {
  word-break: break-all !important;
  span {
    display: block;
    &::before {
      content: attr(data-index);
    }
    &::after {
      content: attr(data-end);
    }
    ::v-deep(p) {
      display: inline-block;
      margin: 0;
    }
  }
}
</style>
